<template>
	<view class="content">
		<banner></banner>
		<view class="cp-menu">
			<view :class="'cp-menu-item ' + (typeId===item.typeid?'active':'')" :data-typename='item.typename' :data-typeid='item.typeid'  v-for="(item,index) in sonType"  @tap="typelink">
				<text>{{item.typename}}</text>
			</view>
			
		</view>

		<view class="list">
			<view class="list_shop">
				<view class="shop-item" v-for="(item,index) in productList">
					<image @tap="artlink" :data-id='item.id' :data-typename="item.typename" :data-channelid="item.channelid"  :src="item.litpic" mode="aspectFill" class="pic_lis_img" />
					<view class="shop_text">
						<view class="shop-title">{{item.title}}</view>
						<view class="shop-info">
							<view class="zan" @tap="zan(item.id,index)">
								<text :class="'iconfont '+(item.islove ? 'icon-aixin1':'icon-02')"></text>
								<text class="zan-size">{{item.zan}}</text>
							</view>
							<view>
								<text class="iconfont icon-fenxiang"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		ajaxtype,
		ajaxlist,
		ajaxzan
	} from '../../utils/api.js'
	export default {
		data() {
			return {
				sonType: [],
				pageNum: 1,
				listNum: 8,
				typeId: 2,
				productList: [],
				isLoadMore: false
			}
		},
		onLoad(options) {
			var that = this
			that.typeId=options.typeid ? options.typeid :'2'
			that.getSonType(2)
			this.getList() //获取产品列表
		},

		onReachBottom() { //上拉触底函数
		console.log(this.typeId)
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.pageNum += 1
				this.getList() //获取产品列表
				uni.showLoading({
					title: '加载中'
				})
			}
		},
		methods: {
			typelink:function(e){
				let typeid=e.currentTarget.dataset.typeid
				let typename=e.currentTarget.dataset.typename
				if(typeid!==this.typeId){
					this.productList=[];
					this.pageNum=1
					this.typeId=typeid
					this.getList()
					uni.setNavigationBarTitle({
					    title: typename
					});
				}
				/*
				 uni.navigateTo({
				                    url: '../product2/product2?typeid=' + typeid
				                });
								*/
			},
			artlink:function(e){
				
				let {id,channelid,typename} = e.currentTarget.dataset
				 uni.navigateTo({
				                    url: '../details/details?aid=' + id+'&channlid='+channelid+'&typename='+typename
				                });
			},
			getList: function() {
				var that = this;
				console.log(that.typeId)
				ajaxlist(that.typeId, that.pageNum, that.listNum).then((res) => {
					console.log(res)
					if (res.data && res.data.state === 1) {
						let datas = res.data.data.map((res) => {
							return {
								litpic: res.cfg_basehost + res.litpic,
								typeid: res.id,
								typename: res.typename,
								title: res.title,
								channelid:res.channel,
								id: res.id,
								zan: res.zan
							}
						})

						if (that.productList.length > 0) {
							that.productList = [...that.productList, ...datas].filter(item => item)
						} else {
							that.productList = datas
						}
						
						setTimeout(function() {
							uni.hideLoading()
							that.isLoadMore = false
						},1000)
					} else {
						uni.hideLoading()
						that.isLoadMore = true
					}
				})

			},
			zan: function(aid, index) {
				var that = this
				ajaxzan(aid).then((res) => {

					if (res.data.state === 1) {
						that.productList[index].islove = 1
						that.productList[index].zan = res.data.data
					}
				})
			},
			getSonType: function(typeId) {
				var that = this;
				ajaxtype(typeId).then((res) => {

					if (res.data.data.length > 0) {
						let datas = res.data.data.map((res) => {
							let s = {
								typelitpic: res.cfg_basehost + res.typelitpic,
								typeid: res.id,
								typename: res.typename
							};
							return s
						})
						that.sonType = datas
					} else {
						uni.showToast({
							title: "子栏目为空",
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.cp-menu {
		@include flex-block();
		width: 100%;
		background-color: #fff;
		box-shadow: 0px 5px 15px #dfdfdf;
		.cp-menu-item {
			@include flex(1);
			text-align: center;
			color: $base;
			padding: 2vw 0;
			font-size: 3.5vw;
			line-height: 8vw;
			@include zihang(1);
			position: relative;
			&:after{
				width: 0px;
				content:'';
				@include transition(all .5s);
				position: absolute;
				height: 0.7vw;
				background-color: $base;
				left: 50%;
				top: 9vw;
				
			}
			&.active{
				&:after{
					margin-left: -2.5vw;
					width: 5vw;
					
				}
			}
		}
	}

	.list {
		padding: 2vw;
		margin-top: 4vw;

		.list_shop {
			@include flex-block();
			@include flex-wrap(wrap);

			.shop-item {
				@include flex(1);
				min-width: 40%;
				border-radius: 2vw;
				margin: 2vw;
				background-color: #fff;
				overflow: hidden;
			}

			.pic_lis_img {
				height: 40vw;
				width: 100%;
			}

			.shop_text {
				padding: 2vw;

				.shop-info {
					margin-top: 2vw;
					@include flex-block();
					@include justify-content(space-between);
					color: #999;

					.zan {
						.iconfont {
							margin-right: 1vw;
						}

						.icon-aixin1 {
							color: red
						}

						.zan-size {
							font-size: 3.5vw
						}
					}
				}
			}
		}
	}
</style>
